<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">
    <h:form>
    <div class="navbar-search input-append">
        <p:inputText styleClass="span2" label="Recherche par titre" 
                     value="#{searchManagedBean.simpleSearchLabel}"/>  
        <p:commandButton ajax="false" styleClass="btn" value="Ok" 
                         action="#{searchManagedBean.simpleSearch}" />
<!--        <a href="#" class="dropdown-toggle" 
           data-toggle="dropdown">Plus de critères... <span class="caret"></span></a>-->
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            Plus de critères...
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <table style="margin-left:10px; margin-right:10px">
                    <tr>
                        <td>
                            <label>Par Titre :</label>
                            <p:inputText value="#{searchManagedBean.titleLabel}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Par Auteur :</label>
                            <p:inputText value="#{searchManagedBean.authorLabel}"/>
                        </td>
                        <td>
                            <label>Par Série :</label>
                            <p:inputText value="#{searchManagedBean.serieLabel}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Par Éditeur :</label>
                            <p:inputText value="#{searchManagedBean.publisherLabel}"/>
                        </td>
                        <td>
                            <label>Par Collection :</label>
                            <p:inputText value="#{searchManagedBean.collectionLabel}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p:selectOneMenu value="#{searchManagedBean.typeId}" effect="fade" style="width:220px" panelStyle="width:210px">
                                <f:selectItem itemLabel="Par type" itemValue="-1" />  
                                <f:selectItems value="#{myTypeController.types}" var="t" 
                                               itemLabel="#{t.label}" itemValue="#{t.id}"/>
                            </p:selectOneMenu>
                        </td>
                        <td>
                            <p:selectOneMenu value="#{searchManagedBean.categoryId}" effect="fade" style="width:220px" panelStyle="width:210px">
                                <f:selectItem itemLabel="Par catégorie" itemValue="-1" />
                                <f:selectItems value="#{myCategoryController.categories}" 
                                               var="c" itemLabel="#{c.label}" itemValue="#{c.id}"/>
                            </p:selectOneMenu>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p:commandButton ajax="false" style="margin-right:10px" 
                                             value="Ok" icon="ui-icon-search" 
                                             actionListener="#{searchManagedBean.advancedSearch}" />
                        </td>
                    </tr>
                </table>
            </ul>
        </div>
    </div>
    </h:form>
</ui:fragment>
